<template>
  <div id="helpList">
    <div id="mainBox">
      <div id="boxTit">
        <span class="tit">帮助文档</span>
        <i
          class="el-icon-circle-plus-outline"
          @click="appends"
        />
      </div>
      <div id="helpmain">
        <el-collapse
          v-model="activeNames"
          @change="handleChange"
        >
          <el-collapse-item
            v-for="(item,index) in arr.documents"
            ref="tit"
            :key="index"
            :title="item.hdType.desc"
            :name="index"
          >
            <vue-editor
              :disabled="true"
              v-model="item.hdContent"
              :editor-toolbar="customToolbar"
            />
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>

  </div>
</template>
<script>
import { doclist } from '@/api/page'
import { VueEditor } from 'vue2-editor'

export default {
  components: {
    VueEditor
  },
  data() {
    return {
      arr: [],
      activeNames: [],
      customToolbar: []
    }
  },
  mounted() {
    doclist()
      .then(response => {
        if (response.data.code == 'SUCCESS') {
          this.arr = response.data.data
          console.log(this.arr)
        } else {
          alert(response.data.message)
        }
      })
      .catch(error => {
        alert(error.response.data.message)
      })
  },
  methods: {
    getHdTypeDesc(res) {
      return JSON.parse(res)
    },

    search() {
      for (var i = 0; i < this.arr.length; i++) {
        if (this.arr[i].tit.indexOf(this.add) != -1) {
          const distance = this.$refs.tit[i].$el.getBoundingClientRect().top
          window.scroll(0, distance)
        }
      }
    },
    appends() {
      this.$router.push('/help/add')
    },
    handleChange(val) {
      console.log(val)
    }
  }
}
</script>
<style>
#helpList {
  margin-top: 20px;
  margin-left: 20px;
}
#helpList .el-input {
  margin-top: 10px;
  margin-right: 10px;
  width: 200px;
}
#helpList #mainBox {
  width: 99%;
  border: 1px solid #623f18;
}
#helpList #mainBox #boxTit {
  height: 40px;
  width: 100%;
  background: #623f18;
}
#helpList #helpmain {
  width: 95%;
  margin-left: 2.5%;
  margin-top: 20px;
}
#helpList #mainBox #boxTit i {
  cursor: pointer;
  float: right;
  line-height: 40px;
  margin-right: 10px;
  font-size: 25px;
  color: #fff;
}
#helpList #mainBox #boxTit .tit {
  margin-left: 20px;
  font-size: 20px;
  color: #fff;
  line-height: 40px;
}
#helpList .ql-toolbar {
  display: none;
}
#helpList .ql-container {
  border: none;
}
#helpList .el-collapse-item__header {
  font-weight: bold;
  color: #623f18;
}
</style>
